<template>
  <section>
    <img class="bg" src="/static/images/pic3.png" alt="">
    <h3>{{question.questionName}}</h3>
    <div class="flex-row">
      <div class="pics active" v-for="(pic, index) in question.optionList"
      :key="index" @click="active(index)">  
      <img :src="'http://47.97.102.73:80/'+pic.optionName">
      <svg v-if="choose === index" class="icon" aria-hidden="true">
        <use xlink:href="#icon-sggg"></use>
      </svg>
    </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'question',
  data () {
    return {
      title: 'type6',
      pics: [
        {url: '/static/images/pic1.png'},
        {url: '/static/images/pic2.png'},
        {url: '/static/images/pic3.png'},
        {url: '/static/images/pic4.png'},
        {url: '/static/images/pic1.png'}
      ],
      choose: -1
    }
  },
  props: [
    'question'
  ],
  methods: {
    active (index) {
      this.choose = index
      this.$emit('next')
    }
  }
}
</script>

<style lang="scss" scoped>
section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bg {
  height: 100vw;
  width: 100vw;
}
h3 {
  font-size: 40px;
  color: #999;
  margin: 30px auto;
  line-height: 60px;  
}
.flex-row {
  width: 580px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  img {
  height: 100%;
  width: 100%;
}
}
.pics {
  position: relative;
  width: 251px;
  height: 251px;
  margin-bottom: 50px;
}
.icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 125px;
  height: 125px;
  transform: translate3d(50%, 50%, 0);
  color: #fff;
}
</style>
